<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>按钮图标</title>
<link rel="stylesheet" href="../static/css/style.default.css" type="text/css" />
<script type="text/javascript" src="../static/js/plugins/jquery-1.7.min.js"></script>
<script type="text/javascript" src="../static/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../static/js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="../static/js/custom/general.js"></script>
<!--[if IE 9]>
    <link rel="stylesheet" media="screen" href="../static/css/style.ie9.css"/>
    <![endif]-->
<!--[if IE 8]>
    <link rel="stylesheet" media="screen" href="../static/css/style.ie8.css"/>
    <![endif]-->
<!--[if lt IE 9]>
	<script src="../static/js/plugins/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body class="withvernav">
<div class="bodywrapper">
    <div class="topheader">
        <div class="left">
            <h1 class="logo"><span>管理员</span></h1>
            <span class="slogan">后台管理系统</span>
                     
            <div class="search">
            	<form action="" method="post">
                	<input type="text" name="keyword" id="keyword" value="Enter keyword(s)" />
                    <button class="submitbutton"></button>
                </form>
            </div><!--search-->
            
            <br clear="all" />
            
        </div><!--left-->
        
        <div class="right">
        	<!--<div class="notification">
                <a class="count" href="notifications.html"><span>9</span></a>
        	</div>
			-->
            <div class="userinfo">
            	<img src="../static/images/thumbs/avatar.png" alt="" />
                <span>Juan Dela Cruz</span>
            </div><!--userinfo-->
            

            <div class="userinfodrop">
            	<div class="avatar">
                	<a href=""><img src="../static/images/thumbs/avatarbig.png" alt="" /></a>
                    <div class="changetheme">
                    	改变主题: <br />
                    	<a class="default"></a>
                        <a class="blueline"></a>
                        <a class="greenline"></a>
                        <a class="contrast"></a>
                        <a class="custombg"></a>
                    </div>
                </div><!--avatar-->
				<div class="userdata">
                	<h4>Juan Dela Cruz</h4>
                    <span class="email">youremail@yourdomain.com</span>
                    <ul>
                    	<li><a href="editprofile.html">编辑个人资料</a></li>
                        <li><a href="accountsettings.html">账号设置</a></li>
                        <li><a href="help.html">帮助</a></li>
                        <li><a href="login.html">退出登录</a></li>
                    </ul>
                </div><!--userdata-->
            </div><!--userinfodrop-->
        </div><!--right-->
    </div><!--topheader-->
    
    
    <div class="header">
    	<ul class="headermenu">
        	<li><a href="dashboard.html"><span class="icon icon-flatscreen"></span>首页</a></li>
            <li><a href="manageblog.html"><span class="icon icon-pencil"></span>管理博客</a></li>
            <li><a href="messages.html"><span class="icon icon-message"></span>查看消息</a></li>
            <li><a href="reports.html"><span class="icon icon-chart"></span>统计报表</a></li>
        </ul>
        
        <div class="headerwidget">
        	<div class="earnings">
            	<div class="one_half">
                	<h4>今天的收益</h4>
                    <h2>$640.01</h2>
                </div><!--one_half-->
                <div class="one_half last alignright">
                	<h4>当前利润</h4>
                    <h2>53%</h2>
                </div><!--one_half last-->
            </div><!--earnings-->
        </div><!--headerwidget-->
        
    </div><!--header-->
    
    <div class="vernav2 iconmenu">
    	<ul>
        	<li><a href="#formsub" class="editor">表单提交</a>
            	<span class="arrow"></span>
            	<ul id="formsub">
               		<li><a href="forms.html">基础表单</a></li>
                    <li><a href="wizard.html">表单验证</a></li>
                    <li><a href="editor.html">编辑器</a></li>
                </ul>
            </li>
            <!--<li><a href="filemanager.html" class="gallery">File Manager</a></li>-->
            <li><a href="elements.html" class="elements">网页元素</a></li>
            <li><a href="widgets.html" class="widgets">网页插件</a></li>
            <li><a href="calendar.html" class="calendar">日历事件</a></li>
            <li><a href="support.html" class="support">客户支持</a></li>
            <li><a href="typography.html" class="typo">文字排版</a></li>
            <li><a href="tables.html" class="tables">数据表格</a></li>
			<li class="current"><a href="buttons.html" class="buttons">按钮 &amp; 图标</a></li>
            <li><a href="#error" class="error">错误页面</a>
            	<span class="arrow"></span>
            	<ul id="error">
               		<li><a href="notfound.html">404错误页面</a></li>
                    <li><a href="forbidden.html">403错误页面</a></li>
                    <li><a href="internal.html">500错误页面</a></li>
                    <li><a href="offline.html">503错误页面</a></li>
                </ul>
            </li>
            <li><a href="#addons" class="addons">其他页面</a>
            	<span class="arrow"></span>
            	<ul id="addons">
               		<li><a href="newsfeed.html">新闻订阅</a></li>
                    <li><a href="profile.html">资料页面</a></li>
                    <li><a href="productlist.html">产品列表</a></li>
                    <li><a href="photo.html">图片视频分享</a></li>
                    <li><a href="gallery.html">相册</a></li>
                    <li><a href="invoice.html">购物车</a></li>
                </ul>
            </li>
        </ul>
        <a class="togglemenu"></a>
        <br /><br />
    </div><!--leftmenu-->
        
    <div class="centercontent">
    
        <div class="pageheader notab">
            <h1 class="pagetitle">按钮和图标</h1>
            <span class="pagedesc">这是一个页面的示例说明</span>
            
        </div><!--pageheader-->
        
        <div id="contentwrapper" class="contentwrapper lineheight21">
        
        
                   <div class="contenttitle2">
                   		<h3>图标按钮与文本</h3>
                   </div><!--contenttitle-->
                   
                   
                   <ul class="buttonlist">
                   		<li><a href="" class="btn btn_search radius50"><span>搜索</span></a></li>
                   		<li><a href="" class="btn btn_trash"><span>垃圾</span></a></li>
                   		<li><a href="" class="btn btn_flag"><span>旗</span></a></li>
                   		<li><a href="" class="btn btn_home"><span>家</span></a></li>
                   		<li><a href="" class="btn btn_link"><span>链接</span></a></li>
                   		<li><a href="" class="btn btn_book"><span>书</span></a></li>
                   		<li><a href="" class="btn btn_mail"><span>邮件</span></a></li>
                   		<li><a href="" class="btn btn_help"><span>帮助</span></a></li>
                   		<li><a href="" class="btn btn_rss"><span>RSS</span></a></li>
                   		<li><a href="" class="btn btn_archive"><span>档案</span></a></li>
                   		<li><a href="" class="btn btn_info"><span>信息</span></a></li>
                   		<li><a href="" class="btn btn_bell"><span>钟</span></a></li>
                   		<li><a href="" class="btn btn_world"><span>世界</span></a></li>
                   		<li><a href="" class="btn btn_bulb"><span>灯泡</span></a></li>
                   		<li><a href="" class="btn btn_cloud"><span>云</span></a></li>
                    </ul>
                    
                    <p>您可以将其更改为任何您想要的颜色。阅读有关如何的文档。下面是一个例子。</p>
                    
                    <ul class="buttonlist">
                   		<li><a href="" class="btn btn_orange btn_search radius50"><span>搜索</span></a></li>
                   		<li><a href="" class="btn btn_orange btn_trash"><span>垃圾</span></a></li>
                   		<li><a href="" class="btn btn_orange btn_flag"><span>旗</span></a></li>
                   		<li><a href="" class="btn btn_orange btn_home"><span>家</span></a></li>
                   		<li><a href="" class="btn btn_orange btn_link"><span>链接</span></a></li>
                    </ul>
                    
                    <br />
                    
                    <div class="contenttitle2">
                   		<h3>与文本的圆角的按钮</h3>
                   </div><!--contenttitle2-->
                   
                   
                   <ul class="buttonlist">
                   		<li><a href="" class="btn btn2 btn_search"><span>搜索</span></a></li>
                   		<li><a href="" class="btn btn2 btn_trash"><span>垃圾</span></a></li>
                   		<li><a href="" class="btn btn2 btn_flag"><span>旗</span></a></li>
                   		<li><a href="" class="btn btn2 btn_home"><span>家</span></a></li>
                   		<li><a href="" class="btn btn2 btn_link"><span>链接</span></a></li>
                   		<li><a href="" class="btn btn2 btn_book"><span>书</span></a></li>
                   		<li><a href="" class="btn btn2 btn_mail"><span>邮件</span></a></li>
                   		<li><a href="" class="btn btn2 btn_help"><span>帮助</span></a></li>
                   		<li><a href="" class="btn btn2 btn_rss"><span>RSS</span></a></li>
                   		<li><a href="" class="btn btn2 btn_archive"><span>档案</span></a></li>
                   		<li><a href="" class="btn btn2 btn_info"><span>信息</span></a></li>
                   		<li><a href="" class="btn btn2 btn_bell"><span>钟</span></a></li>
                   		<li><a href="" class="btn btn2 btn_world"><span>世界</span></a></li>
                   		<li><a href="" class="btn btn2 btn_bulb"><span>灯泡</span></a></li>
                   		<li><a href="" class="btn btn2 btn_cloud"><span>云</span></a></li>
                    </ul>
                    
                    <p>您可以将其更改为任何您想要的颜色。阅读有关如何的文档。下面是一个例子。</p>
                    
                    <ul class="buttonlist">
                   		<li><a href="" class="btn btn2 btn_blue btn_search radius50"><span>搜索</span></a></li>
                   		<li><a href="" class="btn btn2 btn_blue btn_trash"><span>垃圾</span></a></li>
                   		<li><a href="" class="btn btn2 btn_blue btn_flag"><span>旗</span></a></li>
                   		<li><a href="" class="btn btn2 btn_blue btn_home"><span>家</span></a></li>
                   		<li><a href="" class="btn btn2 btn_blue btn_link"><span>链接</span></a></li>
                    </ul>

                    
                   <br />
                    
                   <div class="contenttitle2">
                   		<h3>没有文本的图标按钮</h3>
                   </div><!--contenttitle-->
                   
                   
                   <ul class="buttonlist">
                   		<li><a href="" class="btn btn3 btn_search"></a></li>
                   		<li><a href="" class="btn btn3 btn_trash"></a></li>
                   		<li><a href="" class="btn btn3 btn_flag"></a></li>
                   		<li><a href="" class="btn btn3 btn_home"></a></li>
                   		<li><a href="" class="btn btn3 btn_link"></a></li>
                   		<li><a href="" class="btn btn3 btn_book"></a></li>
                   		<li><a href="" class="btn btn3 btn_mail"></a></li>
                   		<li><a href="" class="btn btn3 btn_help"></a></li>
                   		<li><a href="" class="btn btn3 btn_rss"></a></li>
                   		<li><a href="" class="btn btn3 btn_archive"></a></li>
                   		<li><a href="" class="btn btn3 btn_info"></a></li>
                   		<li><a href="" class="btn btn3 btn_bell"></a></li>
                   		<li><a href="" class="btn btn3 btn_world"></a></li>
                   		<li><a href="" class="btn btn3 btn_bulb"></a></li>
                   		<li><a href="" class="btn btn3 btn_cloud"></a></li>
                    </ul>
                    
                    <p>您可以将其更改为任何您想要的颜色。阅读有关如何的文档。下面是一个例子。</p>
                    
                    <ul class="buttonlist">
                   		<li><a href="" class="btn btn3 btn_black btn_search radius50"></a></li>
                   		<li><a href="" class="btn btn3 btn_black btn_trash"></a></li>
                   		<li><a href="" class="btn btn3 btn_black btn_flag"></a></li>
                   		<li><a href="" class="btn btn3 btn_black btn_home"></a></li>
                   		<li><a href="" class="btn btn3 btn_black btn_link"></a></li>
                    </ul>
                    
                    <br />
                    
                    <div class="contenttitle2">
                   		<h3>没有文本的圆角的按钮</h3>
                   </div><!--contenttitle-->
                   <br />
                   
                   <ul class="buttonlist">
                   		<li><a href="" class="btn btn4 btn_search"></a></li>
                   		<li><a href="" class="btn btn4 btn_trash"></a></li>
                   		<li><a href="" class="btn btn4 btn_flag"></a></li>
                   		<li><a href="" class="btn btn4 btn_home"></a></li>
                   		<li><a href="" class="btn btn4 btn_link"></a></li>
                   		<li><a href="" class="btn btn4 btn_book"></a></li>
                   		<li><a href="" class="btn btn4 btn_mail"></a></li>
                   		<li><a href="" class="btn btn4 btn_help"></a></li>
                   		<li><a href="" class="btn btn4 btn_rss"></a></li>
                   		<li><a href="" class="btn btn4 btn_archive"></a></li>
                   		<li><a href="" class="btn btn4 btn_info"></a></li>
                   		<li><a href="" class="btn btn4 btn_bell"></a></li>
                   		<li><a href="" class="btn btn4 btn_world"></a></li>
                   		<li><a href="" class="btn btn4 btn_bulb"></a></li>
                   		<li><a href="" class="btn btn4 btn_cloud"></a></li>
                    </ul>
                    
                    <p>您可以将其更改为任何您想要的颜色。阅读有关如何的文档。下面是一个例子。</p>
                    
                    <ul class="buttonlist">
                   		<li><a href="" class="btn btn4 btn_yellow btn_search radius50"></a></li>
                   		<li><a href="" class="btn btn4 btn_yellow btn_trash"></a></li>
                   		<li><a href="" class="btn btn4 btn_yellow btn_flag"></a></li>
                   		<li><a href="" class="btn btn4 btn_yellow btn_home"></a></li>
                   		<li><a href="" class="btn btn4 btn_yellow btn_link"></a></li>
                    </ul>

                    
                    <br />
                    
                    <div class="contenttitle2">
                   		<h3>表单按钮</h3>
                   </div><!--contenttitle-->
                   
                   
                   <ul class="buttonlist">
                   		<li><button class="stdbtn">表单按钮</button></li>
                   		<li><button class="stdbtn btn_yellow">表单按钮</button></li>
                        <li><button class="stdbtn btn_blue">表单按钮</button></li>
                        <li><button class="stdbtn btn_black">表单按钮</button></li>
                        <li><button class="stdbtn btn_lime">表单按钮</button></li>
                        <li><button class="stdbtn btn_orange">表单按钮</button></li>
                        <li><button class="stdbtn btn_red">表单按钮</button></li>
                   </ul>
                   
                   <br clear="all" />
                    
                   <div class="contenttitle2">
                    	<h3>图像加载器</h3>
                   </div><!--contenttitle-->
                   
                    
                    <div class="loaders">
                    	<img src="images/loaders/loader1.gif" alt="" />
                        <img src="images/loaders/loader2.gif" alt="" />
                        <img src="images/loaders/loader3.gif" alt="" />
                        <img src="images/loaders/loader4.gif" alt="" />
                        <img src="images/loaders/loader8.gif" alt="" />
                        <img src="images/loaders/loader9.gif" alt="" />
                        <img src="images/loaders/loader5.gif" alt="" />
                        <img src="images/loaders/loader6.gif" alt="" />

                        <img src="images/loaders/loader7.gif" alt="" />
                        <img src="images/loaders/loader10.gif" alt="" />
                        <br /><br />
                        <small>您可以通过转到ajaxload.info来创建您自己的加载器映像 <a href="ajaxload.info">ajaxload.info</a></small>
                    </div><!--loaders-->
        
        
        </div><!--contentwrapper-->
        
	</div><!-- centercontent -->
    
    
</div><!--bodywrapper-->

</body>
</html>
